(function ($) {
    $.fn.timeline = function () {
        let selectors = {
            id: $(this),
            item: $(this).find(".item"),
            activeClass: "item--active",
            img: ".img"
        };
        // 激活时间轴第一个项目，并设置背景图片
        // addClass()方法的主要目的是为了更改或添加元素的样式
        selectors.item.eq(0).addClass(selectors.activeClass);
        selectors.id.css(
            "background-image",
            "url(" +
            selectors.item
                .first()
                .find(selectors.img)
                .attr("src") +
            ")"
        );
        // 获取时间轴项目总数
        let itemLength = selectors.item.length;

        // 当页面滚动时，触发滚动事件
        $(window).scroll(function () {
            let max, min;
            // 获取页面滚动的距离，使用了jQuery中scrollTop()函数
            let pos = $(this).scrollTop();

            selectors.item.each(function (i) {
                // 获取当前时间轴项目的最小和最大高度
                // offset() 方法返回指定元素相对于文档的位置
                // height() 方法用于获取指定元素的高度
                min = $(this).offset().top;
                max = $(this).height() + $(this).offset().top;
                let that = $(this);
                // 如果滚动到最后一个项目，并且超过了当前项目高度的一半，
                // 则将最后一个项目设置为激活状态，并设置背景图片为最后一个项目的图片
                if (i == itemLength - 2 && pos > min + $(this).height()/2) {
                    selectors.item.removeClass(selectors.activeClass);
                    selectors.id.css(
                        "background-image",
                        "url(" +
                        selectors.item
                            .last()
                            .find(selectors.img)
                            .attr("src") +
                        ")"
                    );
                    selectors.item.last().addClass(selectors.activeClass);
                }
                // 如果当前滚动位置在当前项目的最小和最大高度之间，
                // 则将当前项目设置为激活状态，并设置背景图片为当前项目的图片
                else if (pos <= max - 10 && pos >= min) {
                    selectors.id.css(
                        "background-image",
                        "url(" +
                        $(this)
                            .find(selectors.img)
                            .attr("src") +
                        ")"
                    );
                    selectors.item.removeClass(selectors.activeClass);
                    $(this).addClass(selectors.activeClass);
                }
            });
        });
    };
})(jQuery)

//jQuery时间轴插件
$("#shell").timeline();


